<script lang="jsx" setup>
import { ref, watch } from 'vue';
import * as echarts from 'echarts/core';
import { useEcharts } from '@/hooks/common/echarts';

const props = defineProps({
  value: {
    type: Number,
    default: 0
  },
  color: {
    type: String,
    default: '#eaff00'
  }
});

const { domRef, updateOptions } = useEcharts(
  () => ({
    title: {
      text: `${props.value}%`,
      x: 'center',
      y: 'center',
      textStyle: {
        fontWeight: 'normal',
        color: '#fff',
        fontSize: '18'
      }
    },
    color: 'rgba(255,255,255,.3)',

    series: [
      {
        name: 'Line 1',
        type: 'pie',
        clockWise: true,
        radius: ['65%', '80%'],
        itemStyle: {
          normal: {
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          }
        },
        hoverAnimation: false,
        data: [
          {
            value: props.value,
            name: '已使用',
            itemStyle: {
              normal: {
                color: props.color,
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            }
          },
          {
            name: '未使用',
            value: 100 - props.value
          }
        ]
      }
    ]
  }),
  false
);
</script>

<template>
  <div ref="domRef" class="charts h-full w-full"></div>
</template>

<style lang="scss" scoped></style>
